<template>
  <div>
    <!------------------------------ 员工数据搜索框 --------------------------------------------->
    <el-card shadow="always" style="border: 1px solid darkgray; margin-bottom: 10px;">
    <div style="margin-bottom: 5px">
      <el-form
        ref="form"
        size="small"
        label-width="80px"
        style="margin-top: 23px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="员工号">
              <el-input v-model="searchPerson.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="searchPerson.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别">
              <el-radio label="男" v-model="searchPerson.gender">男</el-radio>
              <el-radio label="女" v-model="searchPerson.gender">女</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select v-model="searchPerson.department" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地址">
              <el-input v-model="searchPerson.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期">
              <el-date-picker
                type="date"
                v-model="searchPerson.birthday"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="margin-left: 15px">
            <div>
              <button type="primary" size="small" @click="search()" class="css-button-shadow-border--green"
                ><i class="el-icon-search"></i>&nbsp;搜索</button
              >
            </div>
          </el-col>
          <el-col :span="1">
            <div>
              <button type="success" size="small" @click="reset()" class="css-button-shadow-border--green"
                ><i class="el-icon-refresh"></i>&nbsp;重置</button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    </el-card>
    <!-------------------------------------- 员工数据显示表 ------------------------------------>
    <el-card shadow="always" style="border: 1px solid darkgray;">
    <div>
      <div style="text-align: left; margin-bottom: 15px">
        <button
          type="primary"
          size="small"
          @click="dialogVisible = true"
          class="css-button-shadow-border--green"
        >
          <i class="el-icon-plus"></i>&nbsp;添加
        </button>
        <button type="danger" size="small" @click="removeAll()" class="css-button-shadow-border--red">
          <i class="el-icon-delete"></i>&nbsp;删除
        </button>
        <button type="success" size="small" class="css-button-shadow-border--green">
          <i class="el-icon-upload2"></i>&nbsp;导出
        </button>
        <button type="warning" size="small" class="css-button-shadow-border--green">
          <i class="el-icon-download"></i>&nbsp;导入
        </button>
        <span style="text-align: right; float: right; margin: 15px">
          <el-button size="small" plain type="info">
            <i class="el-icon-s-operation"></i>
          </el-button>
        </span>
      </div>

      
      <el-table
        border
        ref="multipleTable"
        :data="allPerson"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{ order: 'descending' }"
        :header-cell-style="{
          background: '#F5F7FA',
          'text-align': 'center',
          color: '#606266',
        }"
        stripe
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          align="center"
          label="员工号"
          width="160"
          show-overflow-tooltip
          sortable
          prop="id"
          fixed
        >
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="姓名"
          width="160"
          show-overflow-tooltip
          prop="name"
        >
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="gender"
          label="性别"
          width="160"
          show-overflow-tooltip
          sortable
        >
          <template slot-scope="scope">{{ scope.row.gender }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="department"
          label="部门"
          width="100"
          :filters="[
            { text: 'IT', value: 'IT' },
            { text: '财务', value: '财务' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.department === 'IT' ? 'primary' : 'success'"
              disable-transitions
              >{{ scope.row.department }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="家庭地址"
          width="160"
          show-overflow-tooltip
          sortable
        >
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="date"
          label="出生日期"
          width="160"
          show-overflow-tooltip
          sortable
        >
          <template slot-scope="scope">{{ scope.row.birthday }}</template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <button
              size="small"
              plain
              type="warning"
              @click="showUpdate(scope.$index, scope.row)"
              class="css-button-shadow-border--yellow"
            >
              <i class="el-icon-edit"></i>&nbsp;编辑
            </button>

            <button
              size="small"
              type="danger"
              @click="remove(scope.$index, scope.row)"
              class="css-button-shadow-border--red"
            >
              <i class="el-icon-delete"></i>&nbsp;删除
            </button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
    <!-- 对话框 -->
    <el-dialog title="show" :visible.sync="dialogVisible">
      <el-form ref="form" :model="person" label-width="60px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工号">
              <el-input v-model="person.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="person.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="性别">
              <el-radio label="男" v-model="person.gender">男</el-radio>
              <el-radio label="女" v-model="person.gender">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="4"> &nbsp; </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-select v-model="person.department" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址">
              <el-input v-model="person.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="person.birthday"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle()">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 对话框添加或删除标记
      addFlag: true,
      // 存储修改行的下标
      updateIndex: "",
      //表格显示数据，与后端进行绑定
      allPerson: [
        {
          id: "1001",
          name: "张三",
          gender: "男",
          department: "IT",
          address: "重庆市",
          birthday: "2000-06-01",
        },
        {
          id: "1003",
          name: "李四",
          gender: "男",
          department: "财务",
          address: "四川省成都市",
          birthday: "2003-04-01",
        },
        {
          id: "1002",
          name: "王五",
          gender: "男",
          department: "IT",
          address: "山东省济南市",
          birthday: "1998-03-01",
        },
        {
          id: "1004",
          name: "杨六",
          gender: "女",
          department: "财务",
          address: "台湾省",
          birthday: "2002-09-01",
        },
      ],
      // 显示添加对话框
      dialogVisible: false,
      // 添加员工绑定属性
      person: {
        id: "",
        name: "",
        gender: "",
        department: "",
        address: "",
        birthday: "",
      },
      // 搜索员工绑定属性
      searchPerson: {
        id: "",
        name: "",
        gender: "",
        department: "",
        address: "",
        birthday: "",
      },
      // 部门
      options: [
        {
          value: "IT",
          label: "IT",
        },
        {
          value: "财务",
          label: "财务",
        },
      ],
      // 多选框选中的数据，删除时传输后台这个
      multipleSelection: [],
      // 临时变量，记录多选框删除数据
      selectedRows:[],
      // 选中当前行高亮
      currentRow: null,
    };
  },

  methods: {
    // 添加人员
    addOrUpdate() {
      if (this.addFlag == true) {
        this.allPerson.push(this.person);
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.person = {};
      } else {
        // 修改
        this.allPerson.splice(this.updateIndex, 1, this.person);
        this.dialogVisible = false;
        this.addFlag;
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.person = {};
      }
    },
    // 取消添加人员
    cancle() {
      this.dialogVisible = false;
      // 这样清空真的很快，不用傻乎乎每个属性都赋空
      this.person = {};
    },
    // 删除人员
    remove(index, row) {
      this.$confirm("此操作将删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.allPerson.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
    },
    // 数据回显
    showUpdate(index, row) {
      this.addFlag = false;
      this.person = row;
      this.updateIndex = index;
      this.dialogVisible = true;
    },
    //点击一行也加入多选框
    handleRowClick(row, column, event) {
        // 点击某一行时，切换该行的勾选状态，并更新selectedRows数组
        this.$refs.multipleTable.toggleRowSelection(row);
        let index = this.selectedRows.indexOf(row);
        if (index > -1) {
          this.selectedRows.splice(index, 1);
        } else {
          this.selectedRows.push(row);
        }
      },
    // 用于保存选中的行
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    // 删除所有人员
    removeAll() {
      this.$confirm('此操作将批量删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.multipleSelection)
        let val = this.multipleSelection     //选中的值
        if (val) {
          val.forEach((val, index) => {                 // 这块看不明白的话看下面的解释
            this.allPerson.forEach((v, i) => {   
              if (val === v) {
                this.allPerson.splice(i, 1)
              }
            })
          })
        }
        this.$message.success("删除成功")
      })
      .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
    },
    // 搜索人员
    search() {
      this.$message({
        type: "success",
        message: "自己拿到后端查~",
      });
    },
    // 搜索重置
    reset() {
      this.searchPerson = {};
      this.$message({
        type: "success",
        message: "重置成功",
      });
    },


    // 部门标签相关方法
    formatter(row, column) {
      return row.department;
    },
    // 部门标签相关方法
    filterTag(value, row) {
      return row.department === value;
    },
    // 部门标签相关方法
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
};
</script>

<style>
/* 用来设置当前页面element全局table 选中某行时的背景色 */
.el-table__body tr.current-row>td{
  background-color: #dbf2e8 !important;
}
.css-button-shadow-border--green {
  min-width: 80px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  background: #57cc99;
  margin: 5px;
}
.css-button-shadow-border--green:hover {
  background-color: #80ed99;
}
.css-button-shadow-border--green:active {
  top: 2px;
}

.css-button-shadow-border--red {
  min-width: 80px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  background: #f1072e;
  margin: 5px;
}
.css-button-shadow-border--red:hover {
  background-color: #ff6a7b;
}
.css-button-shadow-border--red:active {
  top: 2px;
}

.css-button-shadow-border--yellow {
  min-width: 80px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  background: #f5cd07;
  margin: 5px;
}
.css-button-shadow-border--yellow:hover {
  background-color: #ffe566;
}
.css-button-shadow-border--yellow:active {
  top: 2px;
}
</style>